<template>
  <view class="wrapper" v-if="detail.goods_name">
    <!-- 轮播图 -->
    <u-swiper @click="clickSwiper" :list="swiperList" :height="498"></u-swiper>
    <!-- 价格名称 -->
    <view class="info">
      <view class="price">
       ￥ {{detail.goods_price}}
      </view>
      <view class="actions">
        <u-icon color="#707070" class="action-icon" name="share" size="36"></u-icon>
        <u-icon color="#707070" class="action-icon" name="star" size="36"></u-icon>
      </view>
    </view>
    <view class="title u-line-2">
      {{detail.goods_name}}
    </view>
    <!-- 分割线 -->
    <view class="divider"></view>
    <!-- 详情 -->
    <view class="introduceTitle">
      图文详情
    </view>
    <!-- 数据中带有 html 标签的显示 -->
    <!-- 方法一 v-html -->
    <!-- <view v-html="detail.goods_introduce"></view> -->
    <!-- 方法二 rich text -->
    <!-- <rich-text :nodes="detail.goods_introduce"></rich-text> -->
    <!-- 方法三 使用 uview 的 parse (商品详情建议这个,比较复杂) -->
    <u-parse :html="detail.goods_introduce"></u-parse>

    <!-- 订单提交栏 -->
    <SubmitBar @addCart="addCart"/>
  </view>
</template>

<script>
import SubmitBar from './components/SubmitBar.vue'
// 在外层定义全局的请求配置, 不参与渲染
let params = {
  goods_id: ''
}
export default {
  components: {
    SubmitBar
  },
  data() {
    return {
      // cart: [],
      // 定义存放详情数据的变量, 参与渲染
      detail: {}
    }
  },
  computed: {
    swiperList() {
      // 因为后台数据跟组件要求不一样, 所以进行数据处理
      return this.detail.pics ? this.detail.pics.map(item => item.pics_big) : []
    }
  },
  onLoad(options) {
    // 记录跳转叫来的 产品 id
    // 为了将页面放在第一页进行打开测试, 给一个产品默认值
    params.goods_id = options.goods_id || 9832
    // 调用函数获取详情
    this.getDetail()
  },
  methods: {
    addCart() {
      // 1. 先组织当前产品必备数据
      const goodsData = {
        number: 1,
        isChecked: true,
        goods_id: this.detail.goods_id,
        goods_name: this.detail.goods_name,
        goods_price: this.detail.goods_price,
        pic: this.detail.pics[0].pics_sma_url
      }
      // 2. 调用 mutations 放入到 vuex 当中
      this.$store.commit('cart/addGoods', goodsData)
    },
    async getDetail() {
      // 发送请求赋值 data
      const {message} = await this.$u.get('/goods/detail', params)
      this.detail = message
    },
    clickSwiper(index) {
      uni.previewImage({
        // 点击轮播图时, 打开预览弹窗
        // 传入轮播图数组作为预览基础
        urls: this.swiperList,
        // 传入当前点击的图片, 作为默认预览的当前图片
        current: this.swiperList[index]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  padding-bottom: 96rpx;
}
.info {
  padding: 20rpx 34rpx;
  display: flex;
  justify-content: space-between;
  
  .price {
    font-size: 36rpx;
    color: $theme-color;
  }
  .actions {
    .action-icon {
      color: #707070;
      margin-left: 40rpx;
    }
  }
}
.title {
  padding: 0 34rpx;
  font-size: 30rpx;
  line-height: 38rpx;
  font-weight: bold;
  height: 76rpx;
  color: #434343;
}
.divider {
  height: 20rpx;
  background: #f9f9f9;
  margin: 20rpx 0;
}
.introduceTitle {
  font-weight: bold;
  color: #434343;
  padding: 20rpx;
  text-align: center;
}
</style>